<template>
  <div>
    <Header :left="true" leftText="返回" title="维修审核" />
    <div>
      <van-row style="margin-top:80px;">
        <van-col><van-image width="40" height="30" style="margin-left:-10px;" src="assets/block.png" /></van-col>
        <van-col class="message">多媒体信息</van-col>
      </van-row>
    </div>
    <!-- 多媒体信息 -->
    <div class="divMedia">
      <van-row style="margin-top:10px;">
        <van-col span="4" style="font-weight:bold;color:#A9A9A9;margin-left:10px;margin-top:8px;">视频：</van-col>
        <van-col span="14" style="color:#A9A9A9;">
          <!-- 循环显示视频 -->
          <div v-show="vedioShow" v-for="item in vedioList" :key="item.id" style="margin-left:-10px;">
            <van-image style="float:left;" width="50" height="40" @click="playVedio(item.filePath)"
              src="assets/vedio.png" />
          </div>
        </van-col>
      </van-row>
      <van-divider style="margin-top:0px;" />
      <van-row style="margin-top:10px;">
        <van-col span="3" style="font-weight:bold;color:#A9A9A9;margin-left:10px;margin-top:8px;">照片：</van-col>
        <van-col span="14" style="color:#A9A9A9;"><van-uploader v-show="photoShow" v-model="photoList" :deletable="false"
            multiple :max-count="pictureNum" /></van-col>
      </van-row>
      <van-divider style="margin-top:0px;" />
      <van-row style="margin-top:10px;">
        <van-col span="4" style="font-weight:bold;color:#A9A9A9;margin-left:10px;margin-top:8px;">语音：</van-col>
        <van-col span="14" style="color:#A9A9A9;">
          <div v-show="audioShow" @click="playArm"
            style="background-color: #00FF33; width:140px;height:35px; margin-left:-10px;">
            <van-image v-show="audioStop" width="40" height="30" style="margin-right:3px;float:left;"
              src="assets/voice.png">
            </van-image>
            <van-loading v-show="audioLoad" style="float:center;" color="white"><span
                style="color:white;font-size:15px;">播放中...</span></van-loading>
          </div>
        </van-col>
      </van-row>
    </div>

    <div>
      <!-- 标签 -->
      <van-row style="margin-top:10px;">
        <van-col><van-image width="40" height="30" style="margin-left:-10px;" src="assets/block.png" /></van-col>
        <van-col class="message">维修信息</van-col>
      </van-row>
    </div>
    <!-- 分割线 -->
    <div style="background-color: #F5F5F5;height:5px;"><span></span></div>
    <!-- 数据信息 -->
    <div class="divMessage">
      <!-- <Field
        v-model="form.requestCode"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#FF7F50;height:40px;"
        center
        colon
        label="报修单号"
      /> 
      <Field
        v-model="form.repairCode"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;"
        center
        colon
        label="维修单号"
      />
      <Field
        v-model="form.equipName"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;"
        center
        colon
        label="设备编码"
      />-->
      <Field v-model="form.equipDesc" :readonly="true" size="small" style="font-weight:bold;color:#A9A9A9;height:40px;"
        center colon label="设备名称" />
      <Field v-model="form.requestUser" :readonly="true" size="small" style="font-weight:bold;color:#A9A9A9;height:40px;"
        center colon label="报修人" />
      <Field v-model="form.requestTime" :readonly="true" size="small" style="font-weight:bold;color:#A9A9A9;height:40px;"
        center colon label="报修时间" />
      <Field v-model="form.repairUser" :readonly="true" size="small" style="font-weight:bold;color:#A9A9A9;height:40px;"
        center colon label="维修人" />
      <Field v-model="form.endTime" :readonly="true" size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;white-space:nowrap;" center colon label="维修完成时间" />
    </div>
    <!-- 底部按钮 -->
    <van-button :block="true" @click="repairNoPass" color="#ed1941" class="buttonStart" type="primary" text="审核不通过" />
    <van-button :block="true" @click="repairPass" cplor="#138087" class="buttonEnd" type="primary" text="审核通过" />
  </div>
</template>
<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field, Loading,
  tab, Uploader,
  tabs,
  Col,
  Row,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Panel,
  Toast,
  Dialog,
  popup,
  Picker,
} from 'vant'
import { _httpClient } from '@/libs/api'
import { storage } from '@/libs/utils'
import { removeToken, getToken, setBaseApiFrefix, getBaseApiFrefix } from '@/libs/auth'
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(tab)
Vue.use(tabs)
Vue.use(Button)
Vue.use(Col)
Vue.use(Row)
Vue.use(Icon)
Vue.use(VanImage)
Vue.use(Divider)
Vue.use(Checkbox)
Vue.use(Pagination)
Vue.use(Panel)
Vue.use(Dialog)
Vue.use(Picker)
Vue.use(popup)
Vue.use(Uploader)
Vue.use(Loading)
import Header from '@/components/header.vue'
import apicloud from '@/libs/apicloud'
export default {
  components: { Button, Header, Icon, CellGroup, Cell, Field, tab, tabs, Col, Row, Picker },

  data() {
    return {

      btnLoading: false,
      winName: '', //窗口名
      user: [], //当前登录用户
      //多媒体文件
      photoList: [
        //图片
      ],
      pictureNum: 0, //照片数量
      playing: '播放中...', //语音播放中字幕
      audioLoad: false, // 语音播放中
      audioStop: true, // 语音暂停
      photoShow: false, //照片显示控制
      vedioShow: false, //视频显示控制
      audioShow: false, //语音显示控制
      vedioList: [], //视频
      audioPath: '', //语音

      sourceShowPicker: false,
      allSelected: false,
      selectFont: '一键勾选',
      screenWidth: 0,
      checked: true,
      active: 2,
      currentPage: 1,
      fileUrl: '',
      form: {
        atrKey: '', //工厂Key
        eqKey: '', //设备Key
        requestCode: '', //报修单号
        repairCode: '', //维修单编号
        equipId: '设备编码', //设备编码
        equipName: '注塑机', //设备名称
        requestUser: '测试账户', //报修人
        requestTime: '2020-12-03 15:52:00', //报修时间
        exmainUser: '测试账户', //审核人
        exmainTime: '2020-12-03 15:52:00', //审核时间
        executeUser: '测试账户', //执行人
      },
      columns: [{ fault_key: '1', fault_value: '机械故障' }],
    }
  },
  created: function () {
    let oldHight = api.winWidth
    this.screenWidth = oldHight

    this.form = api.pageParam.equip

    let tkn = getToken()
    if (!tkn) {
      api.openWin({
        name: 'login',
        url: './login-login.html',
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      })
    }
    //页面赋值
    this.form = api.pageParam.equip;
    //alert(JSON.stringify(this.form));
    //初始化查询多媒体信息
    this.queryFileById()
  },
  methods: {

    //视频播放
    playVedio(filePath) {
      let that = this;
      if (api.deviceName.toLowerCase() == "vivo" || api.deviceName.toLowerCase() == "oppo" || api.deviceName.toLowerCase() == "honor") {
        var videoPlayer = api.require("videoPlayer");
        videoPlayer.play(
          {
            path: filePath.trim(),
            autoPlay: true
          },
          function (ret, err) {

          }
        );
      } else {
        that.$ac.openVideo({
          url: filePath.trim(),
        });
      }
    },

    //语音播放
    playArm() {
      //判断是播放还是暂停
      if (!this.audioLoad) {
        this.audioLoad = true
        this.audioStop = false
        if (this.audioPath == '') {
          Dialog.alert({
            message: '当前无语音信息',
            theme: 'round-button',
          }).then(() => {
            // on close
          })
        }
        var audioStreamer = api.require('audioStreamer')
        let _this = this
        audioStreamer.addEventListener({}, function (ret) {
          if (ret.state == 'finished') {
            _this.audioLoad = false
            _this.audioStop = true
          }
        })
        audioStreamer.openPlayer(
          {
            path: _this.audioPath,
          },
          function (ret) {
            // if (ret.status) {
            //   api.alert({ msg: JSON.stringify(ret) })
            // }
          }
        )
      } else {
        var audioStreamer = api.require('audioStreamer')
        audioStreamer.pause()
        this.audioLoad = false
        this.audioStop = true
      }
    },
    //未修好
    repairNoPass() {
      let _this = this
      Dialog.confirm({
        title: '提示',
        theme: 'round-button',
        message: '是否确认当前报修单未修理好?',
      })
        .then(() => {
          //点击确定，继续执行后续操作
          this.repairNoPassExecute()
        })
        .catch(() => { })
    },

    //已维修好
    repairPass() {
      let _this = this
      Dialog.confirm({
        title: '提示',
        message: '是否确认当前报修单已修理好?',
        theme: 'round-button',
      })
        .then(() => {
          //点击确定，继续执行后续操作
          _this.repairPassExecute()
        })
        .catch(() => { })
    },

    //未维修好，执行
    async repairNoPassExecute() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + '/app/repair/repairInfo/updateRepairCheckStatus',
          {
            body: { id: _this.form.id, status: '4' },
          }
        )
        if (res.code === 200) {
          Toast.clear()
          Dialog.alert({
            message: res.msg,
            theme: 'round-button',
          }).then(() => { })

          _this.form.status = '4'
          api.sendEvent({
            name: 'result',
            extra: {
              item: _this.form,
            },
          })
          api.closeWin()
        } else {
          Toast.clear()
          Dialog.alert({
            message: res.msg,
            theme: 'round-button',
          }).then(() => { })
        }
      } catch (e) {
        alert(JSON.stringify(e))
        Toast.fail(JSON.stringify(e))
      }
    },

    //维修好，执行
    async repairPassExecute() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + '/app/repair/repairInfo/updateRepairCheckStatus',
          {
            body: { id: _this.form.id, status: '5' },
          }
        )
        if (res.code === 200) {
          Toast.clear()
          Dialog.alert({
            message: res.msg,
            theme: 'round-button',
          }).then(() => { })

          _this.form.status = '5'
          //维修完成，关闭当前页面
          api.sendEvent({
            name: 'result',
            extra: {
              item: _this.form,
            },
          })
          api.closeWin()
        } else {
          Toast.clear()
          Dialog.alert({
            message: res.msg,
            theme: 'round-button',
          }).then(() => { })
        }
      } catch (e) {
        alert(JSON.stringify(e))
        Toast.fail(JSON.stringify(e))
      }
    },
    //查询维修单多媒体信息
    async queryFileById() {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/repair/requestFile/selectRepairFiles', {
          body: { requestId: _this.form.id },
        })

        if (res.code === 200) {
          Toast.clear()
          if (res.rows.length > 0) {
            //筛选图片、视频、录音
            let pictures = []
            let vedios = []
            let audios = []
            for (let i = 0; i < res.rows.length; i++) {
              if (res.rows[i].fileType == '0') {
                //照片
                let paths = res.rows[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  let num = 0
                  if (paths[j] != '') {
                    let picture = { url: paths[j] }
                    pictures.push(picture)
                    num++
                  }
                  _this.pictureNum = num
                }
                //显示照片
                _this.photoShow = true
              } else if (res.rows[i].fileType == '1') {
                let paths = res.rows[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  if (paths[j] != '') {
                    let vedio = { filePath: paths[j] }
                    _this.vedioList.push(vedio)
                  }
                }
                //视频
                // _this.vedioList.push(res.rows[i])
                _this.vedioShow = true
              } else if (res.rows[i].fileType == '2') {
                //语音
                let paths = res.rows[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  if (paths[j] != '') {
                    _this.audioPath = paths[j]
                    _this.audioShow = true
                    break
                  }
                }
                // if (_this.audioPath == '') {
                //   _this.audioPath = res.rows[i].filePath
                //   _this.audioShow = true
                // }
              }
            }
            _this.photoList = pictures //照片数组赋值
          }
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.clear()
        alert(JSON.stringify(e))
      }
    },
  },
}
</script>
<style>
body {
  background-color: White;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}

.buttonRight {
  position: fixed;
  margin-top: -40px;
  right: 10px;
  width: 85px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}

.buttonStart {
  position: fixed;
  bottom: 3px;
  left: 5px;
  width: 45%;
  height: 30px;
  background-color: #ff9933;
  border-color: #ff9933;
  font-size: 12px;
}

.buttonEnd {
  position: fixed;
  bottom: 3px;
  right: 5px;
  width: 45%;
  height: 30px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
  font-size: 12px;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.divStyle {
  border: 1px solid #dcdcdc;
  border-top-width: 3px;
  border-left-width: 3px;
  margin-left: 5px;
  margin-right: 4px;
  margin-top: 4px;
}

.pagination {
  position: fixed;
  bottom: 15px;
  width: 300px;
  margin-left: 10%;
  color: rgb(0, 0, 255);
  text-align: center;
}

.divMedia {
  margin-top: 0px;
  height: 230px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.divMessage {
  margin-top: 0px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}
</style>
